<template>
  <modal :visible="visible" title="新增" okText="保存" :width="1200" @cancelHandler="onClose" @okHandler="handleSubmit">
    <template slot="content">
      <a-spin :spinning="loading" :delay="200" tip="提交中...">
        <a-form :form="form">
          <a-form-item label="标题" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'title',
                { rules: [{ required: true, message: '标题不能为空' }, { max: 50, message: '字数不能超过50字' }] }
              ]"
            />
          </a-form-item>
          <a-form-item label="状态" v-bind="formItemLayout">
            <a-select
              :showArrow="true"
              v-decorator="[`stat`, { rules: [{ required: true, message: '请选择状态' }] }]"
              placeholder="请选择状态"
              :options="[
                  { key: 1,value: 1, title: '草稿' },
                  { key: 2,value: 2, title: '发布' }
                ]"
            >
            </a-select>            
          </a-form-item>
          <!-- <a-form-item label="标签" v-bind="formItemLayout">
            <a-select
              mode="tags"
              allowClear
              v-model="pickedTags"
              @select="handleSelect"
            >
            <a-select-option v-for="tag in tags" :key="tag.name">
              {{ tag.name }}
            </a-select-option>
            </a-select>
          </a-form-item> -->
          <a-form-item label="内容" v-bind="formItemLayout">
            <rich-editor :html="content" :id="'noticeAdd'" @editorChange="handleEditorChange" :height="300"/>
          </a-form-item>
        </a-form>
      </a-spin>
    </template>
  </modal>
</template>
<script>
import modal from '~/tool/modal';
import RichEditor from '@/components/editor/RichEditor';

import {
  regexp,
  onMediumIdChange,
} from 'utils/common';
const formItemLayout = {
  labelCol: { span: 2 },
  wrapperCol: { span: 21 }
};

export default {
  name: 'add',
  components: { 
    modal, 
    RichEditor, 
    // VNodes: {
    //   functional: true,
    //   render: (h, ctx) => ctx.props.vnodes
    // } 
  },
  props: {
    visible: {
      default: false
    },
    // 新增记录
    apiURL: {
      type: Object,
      default: () => ({})
    },
  },
  data() {
    return {
      regexp,
      loading: false,
      formItemLayout,
      form: this.$form.createForm(this),
      // 需要提交的数据
      submitData: {},
      tags: [],
      pickedTags: [],
      content: ''
    };
  },
  computed: {
   labels () {
     return this.tags.map(tag => { return tag.name })
   }
  },
  methods: {
    handleSelect (name) {
      const ext = this.labels.indexOf(name) > -1
      if (ext) return
      this.addLabel(name)
    },
    handleEditorChange (html) {
      this.content = html
    },
    // ---------------------- 界面交互事件 -------------------------
    // 重置
    reset() {
      this.loading = false;
      this.content = ''
      this.pickedTags = []
      this.form.resetFields();
    },
    // 关闭弹窗
    onClose() {
      this.$confirm({
        title: '确定放弃编辑吗？',
        content: '',
        okText: '确定',
        cancelText: '取消',
        onOk: this.onCloseConfirm
      });
    },
    // 确定关闭弹窗
    onCloseConfirm() {
      this.reset();
      this.$emit('close');
    },
    // 新增提交
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$confirm({
            title: '确定保存吗？',
            content: '',
            okText: '确定',
            cancelText: '取消',
            onOk: this.handleConfirmSubmit
          });
        }
      });
    },
    // 确定新增提交
    handleConfirmSubmit() {
      let that = this;
      this.loading = true;
      let tmpObj = this.form.getFieldsValue();
      tmpObj.status = 1
      tmpObj.label = this.pickedTags.join(',')
      tmpObj.content = this.content
      this.$post(this.apiURL.addRecords, {
        ...tmpObj
      }).then(r => {
        this.reset();
        this.$emit('success');
      }).catch(() => {
        this.loading = false;
      });
    },
    
    addLabel (name) {
      this.$post(this.apiURL.addLabel, {
        name
      }).then(r => {
        this.$message.success('新增标签成功')
      })
    }
  },
  watch: {
    visible (val) {
      if (val) {
      }
    }
  }
};
</script>
